import styled from "styled-components";

export const TitleStyle = styled.div`
  .cnt {
    width: 670px;
    height: 158px;
    margin: 40px;
    display: flex;
    .imgBox {
      border: 1px solid #ccc;
      padding: 3px;
      width: 158px;
    }
    .cnt-r {
      flex: 1;
      margin-left: 30px;
      .cnt-r-name {
        font-size: 20px;
        font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
        color: #333;
        line-height: 24px;
        margin: 16px 0 4px;
      }
      .updateTimeBox {
        margin: 0 0 20px;
        line-height: 35px;
        font-size: 14px;
        display: flex;
        align-items: center;
        .time-icon {
          display: block;
          float: left;
          width: 13px;
          height: 13px;
          background-position: -18px -682px;
          background-image: url(${require("@/assets/img/sprite_icon2.png")
            .default});
          margin-right: 5px;
          :after {
            content: "";
            display: block;
            overflow: hidden;
            clear: both;
          }
        }
        span {
          color: #666;
        }
        .updt {
          margin-left: 20px;
        }
      }
    }
    .play-box {
      display: flex;
      .add-play-box {
        .playauto {
          color: #fff;
          background-position: 0 -633px;
          background-image: url(${require("@/assets/img/sprite_button.png")
            .default});
          height: 31px;
          line-height: 31px;
          width: 76px;
          float: left;
          cursor: pointer;
          :hover {
            background-position: 0 -719px;
          }
          :after {
            content: "";
            display: block;
            overflow: hidden;
            clear: both;
          }
          span {
            padding-left: 20px;
          }
        }
        .addPlayList {
          width: 31px;
          height: 31px;
          padding-right: 0;
          background-position: 0 -1588px;
          background-image: url(${require("@/assets/img/sprite_button.png")
            .default});
          cursor: pointer;
          :hover {
            background-position: -40px -1588px;
          }
        }
      }
      .forward-btn {
        background-color: #fff;
        background-image: url(${require("@/assets/img/sprite_button.png")
          .default});
        background-position: right -1020px;
        padding: 0 5px 0 0;
        height: 30px;
        line-height: 30px;
        margin-left: 10px;
        cursor: pointer;
        :hover {
          background-position: right -1106px;
        }
        .forwardspan {
          background-image: url(${require("@/assets/img/sprite_button.png")
            .default});
          background-position: 0 -1225px;
          padding-left: 30px;
          padding-right: 10px;
          display: block;
          :hover {
            background-position: 0 -1268px;
          }
        }
      }
      .download-btn {
        background-color: #fff;
        background-image: url(${require("@/assets/img/sprite_button.png")
          .default});
        background-position: right -1020px;
        padding: 0 5px 0 0;
        height: 30px;
        line-height: 30px;
        margin-left: 10px;
        cursor: pointer;
        :hover {
          background-position: right -1106px;
        }
        .download-btn-span {
          background-image: url(${require("@/assets/img/sprite_button.png")
            .default});
          background-position: 0 -2761px;
          padding-left: 30px;
          padding-right: 10px;
          display: block;
          :hover {
            background-position: 0 -2805px;
          }
        }
      }
      .assess-btn {
        background-color: #fff;
        background-image: url(${require("@/assets/img/sprite_button.png")
          .default});
        background-position: right -1020px;
        padding: 0 4px 0 0;
        height: 30px;
        line-height: 30px;
        margin-left: 10px;
        cursor: pointer;
        :hover {
          background-position: right -1106px;
        }
        .assess-btn-span {
          background-image: url(${require("@/assets/img/sprite_button.png")
            .default});
          background-position: 0 -1465px;
          padding-left: 30px;
          padding-right: 10px;
          display: block;
          :hover {
            background-position: 0 -1508px;
          }
        }
      }
    }
  }
`;
